<template>
  <van-grid class="section-grid">
    <van-grid-item class="section-grid-item" v-for="(item,index) in $store.state.data.section" :key="index">
      <div @click="linkTo(item)">
        <van-image :src="item.image" />
        <br />
        <span>{{item.name}}</span>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  name: "section-grid",
  methods: {
    linkTo(section) {
      this.$router.push({path:"/section",query:{section:section.name}});
    },
  },
};
</script>

<style>
.section-grid{
    font-size: small;
    margin: 5px 20px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px 0px #97979759;
}
.section-grid-item:first-of-type .van-grid-item__content{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.section-grid:last-of-type .van-grid-item__content{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.section-grid img{
    width: 40px;
    height:40px;
}
</style>